<div nz-row nzGutter="24" class="py-lg">
  <div nz-col nzMd="24" nzLg="6">
    <nz-card nzTitle="配置规则" nzSize="small" [nzExtra]="optButtion" class="tabs-card" [nzBordered]="true">
      <div nzLayout="inline" se-container>
        <se label="来源类型" labelWidth="0">{{ getSourceType() }}</se>
        <se label="来源表名" labelWidth="0">{{ sourceLabel }}</se>
        <se label="数据库类型" labelWidth="0">
          <nz-select style="width: 140px" [(ngModel)]="scriptDbType">
            <nz-option *ngFor="let item of databaseTypes" [nzLabel]="item" [nzValue]="item" />
          </nz-select>
        </se>
        <se label="Flink连接器" *ngIf="scriptDbType == 'flink'">
          <nz-cascader [nzOptions]="dbSourceOptions" [(ngModel)]="targetDataBases" (ngModelChange)="onCascaderTargetChanges($event)" />
        </se>
        <se label="命名规则" labelWidth="0">
          <nz-radio-group nzSize="small" [(ngModel)]="namingRule">
            <label *ngFor="let item of namingRuleList" nz-radio [nzValue]="item.name">{{ item.value }}</label>
          </nz-radio-group>
        </se>
        <se label="自动格式化" labelWidth="0">
          <nz-switch [(ngModel)]="autoFormat" name="autoFormat" nzCheckedChildren="格式化" nzUnCheckedChildren="原样" />
        </se>
        <se label="字段列表前缀后缀" labelWidth="0">
          <input nz-input nzSize="default" style="width: 50px" [(ngModel)]="colPrefix" />
          <input nz-input nzSize="default" style="width: 50px" [(ngModel)]="colSuffix" />
        </se>
        <se label="表别名" labelWidth="0">
          <input nz-input nzSize="default" style="width: 150px" [(ngModel)]="tableAlias" />
        </se>
      </div>
    </nz-card>
    <ng-template #optButtion>
      <button nz-button nzType="primary" nzSize="small" (click)="getTableAllScript()" [nzLoading]="isLoading">生成脚本</button>
      <button nz-button *ngIf="!record" nzType="default" nzSize="small" (click)="backPage()" [nzLoading]="isLoading">返回</button>
    </ng-template>
  </div>
  <div nz-col nzMd="24" nzLg="18">
    <nz-card nzSize="small">
      <nz-tabset
        [nzTabPosition]="'top'"
        [(nzSelectedIndex)]="selectedTabIndex"
        (nzSelectChange)="scriptTabChanged()"
        [nzTabBarExtraContent]="optTabset"
      >
        <nz-tab nzTitle="DDL语句">
          <div *ngIf="scriptDbType !== 'flink' && actionType === 'edit'">
            <label nz-checkbox [(ngModel)]="forcedExecute">强制执行</label>
            <nz-cascader
              nzSize="small"
              nzPlaceHolder="请选择目标数据库"
              [nzOptions]="dbCurrentOptions"
              [(ngModel)]="targetDataBases"
              (ngModelChange)="onCascaderTargetChanges($event)"
            />
            <button nz-button nzType="primary" nzSize="small" (click)="executeScriptClick()" [nzLoading]="isLoading"
              ><span class="text-red">谨慎</span>执行脚本</button
            >
            <button nz-button nzType="default" nzSize="small" (click)="openScriptLog()" [nzLoading]="isLoading">查看日志</button>
          </div>
          <p></p>
        </nz-tab>
        <nz-tab nzTitle="DML语句" />
        <nz-tab nzTitle="字段列表" />
        <nz-tab nzTitle="DQL语句" />
      </nz-tabset>
      <ngx-codemirror [(ngModel)]="tmpScript" [options]="codeMirrorOptions" />

      <ng-template #optTabset>
        <button nz-button nzType="primary" nzSize="small" (click)="copyCode()" [nzLoading]="tableLoading">复制</button>
      </ng-template>
    </nz-card>
  </div>
</div>
